<template>
  <div class="chat-input">
    <!-- 使用动态组件显示表情，添加:key强制更新 -->
    <button class="emoji-btn" @click="dialogVisible = true">
      <el-icon size="64">
        <component 
          :is="getEmojiComponent(emoji.value)" 
          :key="emojiKey" 
        />
      </el-icon>
    </button>
    <input v-model="inputValue" class="input-box" placeholder="请输入内容" @keyup.enter="sendMessage" />
    <button class="send-btn" @click="sendMessage">发送</button>
  </div>

  <el-dialog
    v-model="dialogVisible"
    title="请选择最能表达您当下心情的图标"
    width="650"
    :before-close="handleClose"
    append-to-body
    custom-class="emoji-dialog"
  >
    <el-segmented v-model="value" :options="options" @change="handleChange">
      <template #default="scope">
        <div class="flex flex-col items-center gap-2 p-2 emoji-option">
          <el-icon size="64">
            <component :is="scope.item.icon" />
          </el-icon>
          <div>{{ scope.item.label }}</div>
        </div>
      </template>
    </el-segmented>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelection">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineEmits, watch, shallowRef } from 'vue'

// 动态导入表情组件
const importEmojiComponents = async () => {
  const [Smile, Happy, Satisfied, General, Upsat, Tired, Angry] = await Promise.all([
    import('./img/emoji/smile.vue'),
    import('./img/emoji/happy.vue'),
    import('./img/emoji/satisfied.vue'),
    import('./img/emoji/general.vue'),
    import('./img/emoji/upset.vue'),
    import('./img/emoji/tired.vue'),
    import('./img/emoji/angry.vue')
  ])
  return {
    1: Smile.default,
    2: Happy.default,
    3: Satisfied.default,
    4: General.default,
    5: Upsat.default,
    6: Tired.default,
    7: Angry.default
  }
}

// 管理当前选择的表情
const emoji = ref(1)
// 输入框内容
const inputValue = ref('')
// 对话框是否可见
const dialogVisible = ref(false)
// 直接使用v-model绑定的值
const value = ref(emoji.value)
// 使用 shallowRef 存储表情组件映射
const emojiComponents = shallowRef({})
// 用于强制更新表情组件的key
const emojiKey = ref(0)

// 加载表情组件
const loadEmojiComponents = async () => {
  emojiComponents.value = await importEmojiComponents()
}

loadEmojiComponents()

// 获取当前表情对应的组件
const getEmojiComponent = (value) => {
  return emojiComponents.value[value] || emojiComponents.value[1]
}

const emits = defineEmits(['send'])

// 表情选项配置
const options = ref([
  { label: '微笑', value: 1, icon: null },
  { label: '快乐', value: 2, icon: null },
  { label: '满足', value: 3, icon: null },
  { label: '一般', value: 4, icon: null },
  { label: '不满', value: 5, icon: null },
  { label: '疲惫', value: 6, icon: null },
  { label: '生气', value: 7, icon: null }
])

// 监听表情组件加载完成，更新选项
watch(emojiComponents, (newComponents) => {
  options.value = [
    { label: '微笑', value: 1, icon: newComponents[1] },
    { label: '快乐', value: 2, icon: newComponents[2] },
    { label: '满足', value: 3, icon: newComponents[3] },
    { label: '一般', value: 4, icon: newComponents[4] },
    { label: '不满', value: 5, icon: newComponents[5] },
    { label: '疲惫', value: 6, icon: newComponents[6] },
    { label: '生气', value: 7, icon: newComponents[7] }
  ]
})

// 处理表情选择变化
const handleChange = (val) => {
  console.log('Selected value:', val)
  value.value = val
}

// 确认选择的表情
const confirmSelection = () => {
  emoji.value = value.value
  // 更新key值，强制组件重新渲染
  emojiKey.value = Date.now()
  dialogVisible.value = false
}

// 发送消息
const sendMessage = () => {
  if (inputValue.value.trim()) {
    emits('send', inputValue.value)
    inputValue.value = ''
  }
}

// 关闭对话框
const handleClose = (done) => {
  value.value = emoji.value
  done()
}

// 监听对话框打开事件，确保显示当前选中的表情
watch(dialogVisible, (newVal) => {
  if (newVal) {
    value.value = emoji.value
  }
})

// 监控数据变化，数据变化时可以添加重新渲染逻辑
watch([emoji, inputValue], () => {
  console.log('数据发生变化，重新渲染组件相关逻辑')
})
</script>


<style scoped>
/* 聊天输入框整体样式 */
.chat-input {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fcdebb;
  border-top: 1px solid #e0e6ed;
  border-radius: 8px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

/* 表情按钮样式 */
.emoji-btn {
  width: 64px;
  height: 64px;
  border: none;
  background-color: #e9ecef;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 15px;
  transition: background-color 0.3s ease;
}

.emoji-btn:hover {
  background-color: #dfe4e9;
}

/* 输入框样式 */
.input-box {
  flex: 1;
  padding: 12px;
  font-size: 1.2rem;
  height: 60px;
  border: 1px solid #d1d9e1;
  border-radius: 30px;
  margin-right: 15px;
  transition: border-color 0.3s ease;
}

.input-box:focus {
  outline: none;
  border-color: #faa43a;
}

/* 发送按钮样式 */
.send-btn {
  padding: 8px 16px;
  font-size: 1.2rem;
  height: 60px;
  width: 120px;
  background-color: #ea9b3b;
  color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.send-btn:hover {
  background-color: #f8c27f;
}

/* 表情选择对话框样式 */
.emoji-dialog {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.emoji-dialog .el-dialog__title {
  font-size: 1.4rem;
  color: #333;
}

.emoji-option {
  transition: transform 0.3s ease;
}

.emoji-option:hover {
  transform: scale(1.1);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 15px;
}
</style>
